<template>
	<view class="box">
		<!-- 点击文字，提示信息 -->
		<view class="verity-wrap" v-show="show">
			<view class="verity-box">
				<view class="verity-content">
					<image class="verity-bg" src="../../static/bgUrl.png"></image>
					<view v-for="(item, index) in point">
						<view class="fl" :class="{ 'verity-select': item.isSelect }" :key="index"
							:style="{ left: item.left, top: item.top }" @click="verityCodeHandle(index,item.value)">
							<view class="fl-box">
								<text class="fl-value"
									:style="{ transform: `rotate(${item.rotate}deg)` }">{{ item.value }}</text>
								<text class="fl-count" v-if="item.count">{{ item.count }}</text>
							</view>
						</view>
					</view>
					<!-- 刷新页面 -->
					<image class="verity-freshbtn" :style="{ transform: `rotate(${refreshRotate}deg)` }"
						src="@/static/加载.png"></image>
					<text class="verity-freshtxt">刷新</text>
					<view class="refresh-box" @click="freshHandle"></view>
				</view>
				<view class="verity-footer">
					<text>请依次点击：</text>
					<text class="verity-footer-code">{{ code }}</text>
				</view>
			</view>
		</view>

		<view class="tap_name">
			<image src="../../static/logo.png" mode="" class="top_image"></image>
			<view class="">
				名称家政
			</view>
		</view>
		<view class="fff"></view>
		<view class="example">
			<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData" class="form">
				<uni-forms-item name="phone">
					<input v-model="customFormData.phone" placeholder="请输入手机号" class="input" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<input v-model="customFormData.password" placeholder="请输入密码" class="input" type="password" />
				</uni-forms-item>

			</uni-forms>
			<navigator url="/pages/Login/captcha" hover-class="navigator-hover">
				<view class="label">使用验证码登录</view>
			</navigator>
			
			<button @click="submit('customForm')" class="btn">提交</button>
			<navigator url="/pages/Login/Reg" hover-class="navigator-hover">
				<view class="label">尚未账号，点击注册</view>
			</navigator>

			<view class="bottom">
				<view class="text">
					<text>或通过以下方式登录</text>
				</view>
				<view class="icon">
					<image @click="goWeixin" src="../../static/wx.png" mode="" />
					<image src="../../static/wb.png" mode="" />
				</view>
				<view class="mainmsg">
					<view class="kefu">
						<p>客服电话：400-065-5799</p>
						<p>工作时间：9：30 - 18：00</p>
					</view>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				//用户需要校验值
				code: '天天开心',
				//干扰值
				confuseDic: '事事如意',
				//显示在模板上的值
				point: [],

				//点击获取值的数量
				count: 0,
				//点击获取值
				verityCodeList: {},
				//按钮旋转
				refreshRotate: 0,


				// 表单数据
				customFormData: {
					phone: '',
					password: ''
				},
				customRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码'
						}, {
							pattern: /^[1]([3-9])[0-9]{9}$/,
							errorMessage: '手机号不合法！'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
							minLength: 6,
							maxLength: 12,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'

						}, {
							pattern: /^[0-9]{6}/,
							errorMessage: '请输入6位密码'
						}]
					}


				}
			}
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			// this.$refs.customForm.setRules(this.customRules)
			// console.log(this.$refs.customForm.setRules(this.customRules), "111113333");
		},
		mounted() {
			this.initVerity();
		},
		methods: {

			submit(ref) {
				// 登录跳转接口
				this.$refs[ref].validate().then(res => {

					if (this.show == false) {
						this.show = !this.show
						this.initVerity()
						this.verityCodeHandle()

					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			initVerity() {
				const code = this.code + this.confuseDic;
				console.log("code：", code);
				const space = [{
						left: '30px',
						top: '5px'
					},
					{
						left: '70px',
						top: '60px'
					},
					{
						left: '160px',
						top: '15px'
					},
					{
						left: '260px',
						top: '40px'
					},
					{
						left: '230px',
						top: '80px'
					},
					{
						left: '181px',
						top: '117px'
					},
					{
						left: '150px',
						top: '60px'
					},
					{
						left: '13px',
						top: '80px'
					},
					{
						left: '70px',
						top: '130px'
					},
					{
						left: '130px',
						top: '120px'
					},
					{
						left: '20px',
						top: '160px'
					},
					{
						left: '260px',
						top: '150px'
					}
				];
				space.sort(() => {
					return Math.random() - 0.5;
				});
				let tempPoint = [];
				for (let i = 0; i < code.length; i++) {
					tempPoint.push({
						left: space[i].left,
						top: space[i].top,
						value: code[i],
						rotate: Math.random() * 360,
						isSelect: false
					});
				}
				this.count = 0;
				this.point = tempPoint;
				console.log("point：", this.point);
				this.verityCodeList = {};
			},
			freshHandle() {
				this.refreshRotate += 360;
				this.initVerity();
			},
			/**
			 * 点击选中
			 * **/
			verityCodeHandle(index, value) {
				if (this.count <= 3) {
					this.point[index].isSelect = true;
					const verityCodeList = this.verityCodeList;
					verityCodeList[value + '' + index] = this.point[index].value;
					console.log("this.point[index].value：", this.point[index].value);
					this.verityCodeList = verityCodeList;
					this.count = Object.keys(verityCodeList).length;

					this.point[index].count = this.count;
					console.log("this.count：", this.count);
					if (this.count == 4) {
						let tempCode = '';
						const code = this.code;
						console.log('code：', code);
						for (let value in verityCodeList) {
							tempCode += verityCodeList[value];
							console.log('tempCode：', tempCode);
						}
						if (tempCode == code) {
							console.log(1111);
							// this.$emit('verity', {
							// 	type: 'success',
							// 	code: tempCode
							// });
							this.show = false
							uni.showToast({
								title: "验证成功"
							})
							uni.request({
								url: 'http://192.168.43.108:3000/cxj/login',
								data: this.customFormData,
								method: "POST",
								success: (res) => {
									console.log(1111,res.data);
									if (res.data.code == 200) {
										console.log(111,271);
										// 存入缓存
										uni.setStorageSync('code', JSON.stringify(res.data));
										
										uni.showToast({
											title: res.data.msg
										})
										uni.switchTab({
											// 跳转到主页面
											url: '/pages/tabbar/tabbar-1/tabbar-1'
										});
									} else {
										uni.showToast({
											icon: "error",
											title: res.data.msg
										})
									}
								}
							});
						} else {
							console.log(2222);
							this.$emit('verity', {
								type: 'fail',
								code: tempCode
							});
							uni.showToast({
								icon: "error",
								title: "验证失败"
							})
							this.initVerity();
						}
					}
				}
			},



			// 微信登录
			goWeixin() {
				
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider, 929292);
						// 手机app支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							console.log('weixin');
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log(JSON.stringify(loginRes));
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											console.log('-------获取微信用户所有-----');
											console.log(JSON.stringify(infoRes
												.userInfo));

											const userInfo = infoRes.userInfo
											getApp().globalData.userInfo = userInfo;
											getApp().globalData.wxCode = userInfo
												.nickName;
											console.log(getApp().globalData.userInfo);
											uni.setStorage({
												key: 'user',
												data: getApp().globalData
													.userInfo,
												success() {
													console.log('存储成功')
												}
											})
											uni.switchTab({
												url: '/pages/HomePageModule/index'
											})
										}
									});
								},
								fail: function(res) {
									console.log(res)
									uni.showToast({
										icon: 'none',
										title: '登陆失败,请确保已安装或已授权登录微信',
										//title: res.errMsg,
										duration: 2000
									});
									setTimeout(function() {
										uni.switchTab({
											url: '/pages/Login/Login'
										})
									}, 2000)
								}
							});
						}
					}
				});

			},

		}
	}
</script>

<style lang="scss">
	.box {
		padding: 0 100rpx;
		height: 100vh;
		background-image: url("../../static/head.png");
	}

	.top_image {
		width: 20%;
		height: 150rpx;
		border-radius: 50%;
	}

	.fff {
		width: 100%;
		height: 900rpx;
		background-color: #fff;
		opacity: 0.9;
	}

	.example {
		position: absolute;
		top: 24%;

	}

	.tap_name {
		display: flex;
		padding: 80rpx 0rpx;
		margin-left: 30%;
		line-height: 150rpx;
	}

	.title {
		position: absolute;
		top: 0;
		margin-top: 50rpx;
		line-height: 360rpx;
		font-size: 68rpx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100rpx;
	}



	.form {
		width: 80%;
		// margin-top: 150rpx;
	}

	.input {
		background: #e2f5fc;
		margin-top: 25rpx;
		margin-left: 20rpx;
		border-radius: 100rpx;
		padding: 20rpx 10rpx;
		font-size: 36rpx;
	}

	.input-placeholder,
	.input {
		color: #94afce;
	}

	.label {

		padding: 5rpx 0;
		text-align: right;
		font-size: 26rpx;
		color: #a7b6d0;
	}


	.btn {
		background-color: rgb(62, 211, 45);
		color: #fff;
		border: 0;
		border-radius: 100rpx;
		width: 80%;
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}

	.btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1rpx, 1rpx);
	}

	.bottom {
		padding: 30rpx 0rpx;

		.text {
			padding: 20rpx 0rpx;
			text-align: center;
			color: #7f7f7f;
		}

		.icon {
			padding: 20rpx 0rpx;
			width: 400rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-around;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}
		}

		.mainmsg {
			padding: 20rpx 0rpx;

			.kefu {
				font-size: 26rpx;
				text-align: center;
				color: #7f7f7f;
			}

			.rexian {
				font-size: 26rpx;
				text-align: center;
				color: #7f7f7f;
			}

			.jvbao {
				font-size: 26rpx;
				text-align: center;
				color: #7f7f7f;
			}

			.fuwu {
				font-size: 26rpx;
				text-align: center;
				color: #7f7f7f;
			}

			.hao {
				font-size: 26rpx;
				text-align: center;
				color: #7f7f7f;
			}
		}
	}

	.verity-wrap {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		left: 0px;
		right: 0px;
		bottom: 0px;
		top: 0px;

		.verity-box {
			width: 320px;
			min-height: 200px;
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translateX(-50%);

			.verity-content {
				border: 2px solid #fff;
				width: 100%;
				height: 200px;
				background-color: #ffffff;
				position: relative;

				.verity-bg {
					width: 100%;
					height: 100%;
					display: block;
					opacity: 0.5;
				}

				.fl {
					position: absolute;
					font-size: 18px;
					color: #ff0000;
					cursor: pointer;

					.fl-box {
						position: relative;

						.fl-value {
							display: inline-block;
						}

						.fl-count {
							position: absolute;
							top: -10px;
							left: 25px;
							color: #ff0000;
							font-size: 14px;
						}
					}
				}

				.verity-select {
					background-color: #d1c09d;
					border-radius: 50%;
					width: 30px;
					height: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
				}

				.verity-freshbtn {
					width: 20px;
					height: 20px;
					position: absolute;
					top: 7px;
					right: 50px;
					z-index: 5;
					transition: all 1s ease;
				}

				.verity-freshtxt {
					color: #333;
					font-size: 16px;
					position: absolute;
					top: 6px;
					right: 9px;
					z-index: 5;
				}

				.refresh-box {
					width: 60px;
					height: 20px;
					position: absolute;
					right: 9px;
					top: 7px;
					z-index: 6;
				}
			}

			.verity-footer {
				width: 100%;
				height: 50px;
				background-color: #d1c09d;
				font-weight: 500;
				color: #ffffff;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10px;

				.verity-footer-code {
					font-weight: bold;
					padding-left: 5px;
				}
			}
		}
	}
</style>